<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <Row class="live_wrapper clearfix">
          <Input v-model="filter.content"
                 @on-search="search"
                 search
                 enter-button="查询"
                 placeholder="请输入任务内容"
                 style="width:290px; margin-right: 10px;float: right;top:0;font-size: 14px;" />
        </Row>
        <Row class="margin-top-10 table_pattern table_pattern2">
          <Table :loading="loading"
                 :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="show_select_repair_user"
           title="选择抢修队员"
           width="500px"
           :mask-closable="false"
           class="public_modal_header edit_modal">
      <Form :label-width="120">
        <FormItem label="选择抢修队员"
                  prop="area_id"
                  class="label_required"
                  style="margin-top:20px; margin-left:20px">
          <Cascader :data="repair_user_list"
                    @on-change='selectUser'
                    style="width: 200px;margin-right: 10px;"
                    placeholder="抢修队员"></Cascader>
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click="assignTaskOk"
                  style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-bottom:20px; margin-left:80px">确定</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import config from '@/config'
import { taskList, repairUserListForAssign, assignTaskRepair, changeTaskStatus } from '@/api/main'
export default {
  data () {
    return {
      item_id: 0,
      pagenation: {},
      columns: [
        {
          key: 'user_name',
          title: '发布者',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.user_name)
          },
        },
        {
          key: 'area_name',
          title: '所属区域',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.area_name)
          },
        },
        {
          key: 'content',
          title: '任务内容',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.content)
          },
        },
        {
          key: 'state_name',
          title: '状态',
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.state_name)
          },
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                    display: params.row.state < 1 ? 'inline-block': 'none'
                  },
                  on: {
                    click: () => {
                      this.assignTask(params.row)
                    },
                  },
                },
                '派单',
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除该任务吗?',
                    transfer: true,
                  },
                  on: {
                    'on-ok': () => {
                      let obj = {}
                      obj.id = params.row.id
                      obj.status = -1
                      changeTaskStatus(obj).then(res => {
                        if (res.code === 0) {
                          this.$Message.success('操作成功')
                          this.init()
                        } else {
                          this.$Message.error(res.text)
                        }
                      })
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        marginBottom: '5px',
                        border: 0,
                        background: 'transparent',
                        fontSize: '14px',
                        color: '#377EEF'
                      },
                      props: {
                        placement: 'top',
                        size: 'small',
                      },
                    },
                    '删除',
                  ),
                ],
              ),
            ])
          },
        },
      ],
      list: [],
      repair_user_list: [],
      loading: true,
      show_select_repair_user: false,
      filter: {
        page: 0,
        content: '',
      },
      repair_user_id: 0,
    }
  },
  methods: {
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.init()
    },
    search: function () {
      this.filter.page = 0
      this.init()
    },
    selectUser (value) {
      this.repair_user_id = value[1]
    },
    assignTask (item) {
      this.item_id = item.id
      let obj = {}
      obj.task_id = item.id
      repairUserListForAssign(obj).then(res => {
        if (res.code == 0) {
          this.repair_user_list = res.data
          this.show_select_repair_user = true
        }
      })
    },
    assignTaskOk () {
      if (!this.repair_user_id) {
        this.$Message.error('请选择抢修员'); return;
      }
      let obj = {}
      obj.id = this.item_id
      obj.repair_user_id = this.repair_user_id
      assignTaskRepair(obj).then(res => {
        if (res.code == 0) {
          this.$Message.success('操作成功')
          this.show_select_repair_user = false
          this.$router.push({ name: 'task_repair_list' })
        } else {
          this.$Message.error(res.text)
        }
      })
    },
    init () {
      taskList(this.filter).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    }
  },
  mounted () {
    this.init();
  }
}
</script>
